<template>
  <el-card class="webshop-account">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="商城中间账户" name="mid">
        <!-- 商城中间账户信息展示表格 -->
        <h1 style="font-size: 18px; margin-top: 10px; margin-bottom: 20px;">商城中间账户</h1>
        <el-descriptions :column="1" size="default" border>
          <el-descriptions-item label="账户ID" label-align="center" align="center">
            {{ adminAccount.account.accountId }}
          </el-descriptions-item>
          <el-descriptions-item label="账户余额" label-align="center" align="center">
            {{ adminAccount.account.balance.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="账户状态" label-align="center" align="center">
            <el-tag type="success" v-if="adminAccount.account.status === 1">正常</el-tag>
            <el-tag type="danger" v-else-if="adminAccount.account.status === 2">已注销</el-tag>
            <el-tag type="warning" v-else>异常</el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <h1 class="small-title" style="margin-top: 30px; margin-bottom: 10px;">流水信息</h1>
        <el-tabs v-model="smallActiveName[0]" type="border-card">
          <el-tab-pane label="近一周" name="week">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[0].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[1].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[0] - incomeAndExpend[1]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[0]" :data="weekBillList" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="week_config.total" class="pager"
              @current-change="weekChangePage" :page-size="week_config.size" />
          </el-tab-pane>

          <el-tab-pane label="近一月" name="month">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[2].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[3].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[2] - incomeAndExpend[3]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[1]" :data="monthBillList" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="month_config.total" class="pager"
              @current-change="monthChangePage" :page-size="month_config.size" />
          </el-tab-pane>

          <!-- 所有流水 -->
          <el-tab-pane label="所有流水" name="all">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[4].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[5].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[4] - incomeAndExpend[5]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[2]" :data="allBillList" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="all_config.total" class="pager"
              @current-change="allChangePage" :page-size="all_config.size" />
          </el-tab-pane>

        </el-tabs>

      </el-tab-pane>


      <el-tab-pane label="商城利润账户" name="profit">
        <!-- 商城利润账户信息展示表格 -->
        <h1 style="font-size: 18px; margin-top: 10px; margin-bottom: 20px;">商城利润账户</h1>
        <el-descriptions :column="1" size="default" border>
          <el-descriptions-item label="账户ID" label-align="center" align="center">
            {{ webShopAccount.account.accountId }}
          </el-descriptions-item>
          <el-descriptions-item label="账户余额" label-align="center" align="center">
            {{ webShopAccount.account.balance.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="账户状态" label-align="center" align="center">
            <el-tag type="success" v-if="webShopAccount.account.status === 1">正常</el-tag>
            <el-tag type="danger" v-else-if="webShopAccount.account.status === 2">已注销</el-tag>
            <el-tag type="warning" v-else>异常</el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 30px;">
          <h1 style="font-size: 18px; margin-bottom: 20px;">商城利润账户充值</h1>
          <!-- 利用element-plus自带的数字输入 -->
          <el-input-number :precision="2" :controls="false" style="width: 50%;" v-model="rechargeAmount"
            placeholder="请输入充值金额" :value-on-clear="100.00" :max="10000000.00" :min="0.01" />
          <el-button type="primary" style="margin-left: 20px" @click="recharge">确认充值</el-button>
        </div>


        <h1 class="small-title" style="margin-top: 30px; margin-bottom: 10px;">流水信息</h1>
        <el-tabs v-model="smallActiveName[1]" type="border-card">
          <el-tab-pane label="近一周" name="week_profit">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[6].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[7].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[6] - incomeAndExpend[7]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[0]" :data="weekBillList_profit" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="week_config_profit.total" class="pager"
              @current-change="weekChangePage_profit" :page-size="week_config_profit.size" />
          </el-tab-pane>

          <el-tab-pane label="近一月" name="month_profit">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[8].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[9].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[8] - incomeAndExpend[9]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[1]" :data="monthBillList_profit" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="month_config_profit.total" class="pager"
              @current-change="monthChangePage_profit" :page-size="month_config_profit.size" />
          </el-tab-pane>

          <!-- 所有流水 -->
          <el-tab-pane label="所有流水" name="all_profit">
            <!-- 明细 -->
            <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
              入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[10].toFixed(2) }}</span>
              元&emsp;&emsp;
              支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[11].toFixed(2) }}</span>
              元&emsp;&emsp;
              纯利润：<span style="font-size: 23px; color: #2e64c2;">
                {{ (incomeAndExpend[10] - incomeAndExpend[11]).toFixed(2) }}
              </span>
              元
            </h1>
            <!-- 表格 -->
            <el-table v-loading="loading[2]" :data="allBillList_profit" style="width: 100%; margin-top: 15px;">
              <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
                :width="item.width" :sortable="item.sortable" />
              <el-table-column label="交易金额 / 元" prop="billAmount" width="200">
                <template v-slot="scope">
                  {{ scope.row.billAmount.toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="all_config_profit.total" class="pager"
              @current-change="allChangePage_profit" :page-size="all_config_profit.size" />
          </el-tab-pane>

        </el-tabs>
      </el-tab-pane>

    </el-tabs>

  </el-card>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from "vue";

const activeName = ref('mid');
const smallActiveName = ref(['week', 'week_profit']);
// 控制表格加载遮罩窗是否出现
const loading = ref([true, true, true, true, true, true]);
const allBillList = ref([]);
const weekBillList = ref([]);
const monthBillList = ref([]);
const allBillList_profit = ref([]);
const weekBillList_profit = ref([]);
const monthBillList_profit = ref([]);
const { proxy } = getCurrentInstance();
// 商城利润账户
const webShopAccount = reactive({
  account: {
    "accountId": "",
    "balance": 0.00,
    "status": 0
  }
});
// 商城中间账户
const adminAccount = reactive({
  account: {
    "accountId": "",
    "balance": 0.00,
    "status": 0
  }
});
const all_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const week_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const month_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const all_config_profit = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const week_config_profit = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const month_config_profit = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
// 按照周、月、全部的顺序：weekIncome, weekExpend, ..., weekIncome_profit, weekExpend_profit, ...
const incomeAndExpend = ref([0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]);
const rechargeAmount = ref(100.00);

const tableLabel = reactive([
  {
    prop: "billId",
    label: "流水ID",
    width: 200
  },
  {
    prop: "sendAccountId",
    label: "转出方账户ID",
    width: 200
  },
  {
    prop: "receiveAccountId",
    label: "接收方账户ID",
    width: 200
  },
  {
    prop: 'billTime',
    label: "流水发生时间",
    width: 200
  },
  {
    prop: 'moreInfo',
    label: "订单备注",
  }
]);

/**
 * 获取商城利润账户
 */
const getWebShopAccount = async () => {
  let res = await proxy.$api.account.getWebShopAccount();
  webShopAccount.account = res.data;
}

/**
 * 获取商城中间账户
 */
const getAdminAccount = async () => {
  let res = await proxy.$api.account.getPersonalAccount({
    userId: 0,
  });
  adminAccount.account = res.data;
}

/**
 * 中间账户所有流水-翻页操作
 * @param {number} page 目标页码
 */
const allChangePage = async (page) => {
  loading.value[2] = true;
  // 更新当前页码
  all_config.current = page;
  await flowAll();
  loading.value[2] = false;
}

/**
 * 中间账户近一周流水-翻页操作
 * @param {number} page 目标页码
 */
const weekChangePage = async (page) => {
  loading.value[0] = true;
  // 更新当前页码
  week_config.current = page;
  await flowOfWeek();
  loading.value[0] = false;
}

/**
 * 中间账户近一月流水-翻页操作
 * @param {number} page 目标页码
 */
const monthChangePage = async (page) => {
  loading.value[1] = true;
  // 更新当前页码
  month_config.current = page;
  await flowOfMonth();
  loading.value[1] = false;
}

/**
 * 获取商城中间账户的所有流水
 */
const flowAll = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalBill({ current: all_config.current, size: all_config.size });
  // 更新表格数据
  allBillList.value = res.data.billList;
  all_config.total = res.data.total;
}

/**
 * 获取商城中间账户的近一周流水
 */
const flowOfWeek = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalWeekBill({ current: week_config.current, size: week_config.size });
  // 更新表格数据
  weekBillList.value = res.data.billList;
  week_config.total = res.data.total;
}

/**
 * 获取商城中间账户的近一月流水
 */
const flowOfMonth = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalMonthBill({ current: month_config.current, size: month_config.size });
  // 更新表格数据
  monthBillList.value = res.data.billList;
  month_config.total = res.data.total;
}

/**
 * 利润账户所有流水-翻页操作
 * @param {number} page 目标页码
 */
const allChangePage_profit = async (page) => {
  loading.value[5] = true;
  // 更新当前页码
  all_config_profit.current = page;
  await flowAll_profit();
  loading.value[5] = false;
}

/**
 * 利润账户近一周流水-翻页操作
 * @param {number} page 目标页码
 */
const weekChangePage_profit = async (page) => {
  loading.value[3] = true;
  // 更新当前页码
  week_config_profit.current = page;
  await flowOfWeek_profit();
  loading.value[3] = false;
}

/**
 * 利润账户近一月流水-翻页操作
 * @param {number} page 目标页码
 */
const monthChangePage_profit = async (page) => {
  loading.value[4] = true;
  // 更新当前页码
  month_config_profit.current = page;
  await flowOfMonth_profit();
  loading.value[4] = false;
}

/**
 * 获取商城利润账户的所有流水
 */
const flowAll_profit = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfMallProfitBill({ current: all_config.current, size: all_config.size });
  // 更新表格数据
  allBillList_profit.value = res.data.billList;
  all_config_profit.total = res.data.total;
}

/**
 * 获取商城利润账户的近一周流水
 */
const flowOfWeek_profit = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfMallProfitWeekBill({ current: week_config.current, size: week_config.size });
  // 更新表格数据
  weekBillList_profit.value = res.data.billList;
  week_config_profit.total = res.data.total;
}

/**
 * 获取商城利润账户的近一月流水
 */
const flowOfMonth_profit = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfMallProfitMonthBill({ current: month_config.current, size: month_config.size });
  // 更新表格数据
  monthBillList_profit.value = res.data.billList;
  month_config_profit.total = res.data.total;
}

/**
 * 获取当前页面需要的所有入账和支出
 */
const getAllIncomeAndExpend = async () => {
  for (let i = 0; i <= 2; ++i) {
    let ret = await proxy.$api.bill.personalAccountStatistics(i);
    incomeAndExpend.value[i * 2] = ret.data.income;
    incomeAndExpend.value[i * 2 + 1] = ret.data.expend;
  }
  for (let i = 0; i <= 2; ++i) {
    let ret = await proxy.$api.bill.mallProfitAccountStatistics(i);
    incomeAndExpend.value[i * 2 + 6] = ret.data.income;
    incomeAndExpend.value[i * 2 + 7] = ret.data.expend;
  }
}

/**
 * 对商城利润账户进行充值
 */
const recharge = async () => {
  let ret = await proxy.$api.account.rechargeMallProfitAccount({ amount: rechargeAmount.value });
  if (ret.status === 200) {
    ElMessage.success("充值成功");
    await getWebShopAccount();
  }
}

onMounted(async () => {
  await getWebShopAccount();
  await getAdminAccount();
  await getAllIncomeAndExpend();

  // 获取中间账户的流水
  await flowAll();
  loading.value[2] = false;
  await flowOfWeek();
  loading.value[0] = false;
  await flowOfMonth();
  loading.value[1] = false;

  // 获取利润账户的流水
  await flowAll_profit();
  loading.value[5] = false;
  await flowOfWeek_profit();
  loading.value[3] = false;
  await flowOfMonth_profit();
  loading.value[4] = false;
})
</script>

<style lang="less" scoped>
.webshop-account {

  .small-title {
    font-size: 18px;
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>